<template>
  <div class="billing">
    <content-header :icon="billingLog" :title="$t('billing.billing')"></content-header>
    <el-card>
      <div class="billing-card">
        <div class="billing-card-left">
          <bundles :youBundles="youBundles" :aLaCarte="aLaCarte" @changeBundles="timestamp = new Date().getTime()"></bundles>
          <billing-address  :billingData="billingData" @refreshBilling="refreshBilling"/>
          <payMethod :billingData="billingData" @refreshBilling="refreshBilling"></payMethod>
        </div>
        <div class="billing-card-right">
          <use-table :youBundles.sync="youBundles" :aLaCarte.sync="aLaCarte" :customer="customer" :timestamp="timestamp"></use-table>

          <billing-history :customer="customer" :timestamp="timestamp"></billing-history>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import contentHeader from '@/components/content-header/content-header'
import bundles from './bundles'
import payMethod from './payMethod'
import useTable from './useTable'
import billingHistory from './billingHistory'
import billingLog from '@/assets/img/billing.png'
import billingAddress from "./billingAddress.vue";
export default {
  name: 'billing',
  components: {
    contentHeader,
    bundles,
    payMethod,
    useTable,
    billingHistory,
    billingAddress
  },
  data () {
    return {
      billingLog,
      customer: {},
      youBundles: null,
      aLaCarte: null,
      billingData: {},
      timestamp: null,
      payMethodTimestamp: null
    }
  },
  methods: {
    async getCustomerId (payMethod) {
      const { getCustomerAndCard } = this.$interface.pay
      const { data } = await getCustomerAndCard()
      this.customer = data.data.customer || {}
      this.billingData = data.data
      if (!payMethod) {
        this.timestamp = new Date().getTime()
      }
    },
    refreshBilling () {
      this.getCustomerId('payMethod')
    }
  },
  async created () {
    await this.getCustomerId()
  }
}
</script>

<style scoped lang="scss">
.billing{
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  >.el-card {
    flex: 1;
  }
}
.billing-card{
  display: flex;
  &-left {
    display: flex;
    flex-direction: column;
    margin-right: 16px;
  }
  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .el-card{
    border: 1px solid #DDE1E6;
  }
  ::v-deep .el-table{
    border: 1px solid #DDE1E6;
    border-radius: 2px;
  }
}
</style>
